<template>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside class="aside" :width="asideWidth" >
        <!-- 侧边栏标题 -->
        <div class="sidebar-title">OA <span v-show="!isCollapse">管理系统</span>
          </div>
  
        <!-- 菜单 -->
        <el-menu
          active-text-color="#ffd04b"
          background-color="#2C3E50"
          class="el-menu-vertical-demo"
          default-active="1"         
          text-color="#fff"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
        >
        <el-menu-item index="1" :route="{name:'home'}">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>

          <el-sub-menu index="2">
            <template #title>
                <el-icon><Checked /></el-icon>
                <span>考勤管理</span>
            </template>
            <el-menu-item index="2-1" :route="{name:'myabsent'}">
                <el-icon><UserFilled /></el-icon>
                <span>个人考勤</span>
            </el-menu-item>
            <el-menu-item index="2-2" :route="{name:'subabsent'}">
                <el-icon><User /></el-icon>
                <span>下属考勤</span>
                </el-menu-item>
        
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
                <el-icon><BellFilled /></el-icon>
                <span>通知管理</span>
            </template>
            <el-menu-item index="3-1" :route="{name:'informpublish'}">
                <el-icon><CirclePlusFilled /></el-icon>
                <span>发布通知</span>
            </el-menu-item>
            <el-menu-item index="3-2" :route="{name:'informlist'}">
                <el-icon><List /></el-icon>
                <span>通知列表</span>
                </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>员工管理</span>
            </template>
            <el-menu-item index="4-1" :route="{name:'staff_add'}">
                <el-icon><CirclePlusFilled /></el-icon>
                <span>新增员工</span>
            </el-menu-item>
            <el-menu-item index="4-2" :route="{name:'stafflist'}">
                <el-icon><List /></el-icon>
                <span>员工列表</span>
                </el-menu-item>
          </el-sub-menu>
          
        </el-menu>
      </el-aside>
  
      <!-- 主体内容 -->
      <el-container>
        <!-- 头部 -->
        <el-header class="el-header">
          <div class="left-header">
            <el-button v-show="isCollapse" @click="onCollapse" :icon="Expand" circle />
            <el-button v-show="!isCollapse" @click="onCollapse" :icon="Fold" circle />
          </div>

          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :size="30" icon="UserFilled" />
              <span style="margin-left:10px;">[{{ authstore.user.department.name }}]{{ authstore.user.realname }} </span>
              
          <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="onResetpwd">修改密码</el-dropdown-item>
                <el-dropdown-item divided @click="onExit">退出登录</el-dropdown-item> 
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          
        </el-header>
          <!-- 主体内容 -->
        <el-main class="el-main">
          <router-view></router-view>
          
        </el-main>
      </el-container>
    </el-container>

    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" title="修改密码" width="500">
      <el-form :model="form" :rules="rules" ref="formTag"> 
        <el-form-item label="旧密码" :label-width="formLabelWidth"  prop="old_password">
          <el-input v-model="form.old_password" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="new_password">
          <el-input v-model="form.new_password" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="confirm_password">
          <el-input v-model="form.confirm_password" autocomplete="off" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
<script setup>
import { ref,computed,reactive} from 'vue';
import {Expand,Fold} from '@element-plus/icons-vue'
import { useAuthStore } from '../../stores/auth.js';
import { useRouter } from 'vue-router';

import { ElMessage } from 'element-plus';
import apiClient from '../../api/api.js';

const authstore = useAuthStore();
const router = useRouter(); // 获取当前路由对象

let isCollapse = ref(false); // 控制侧边栏的展开和收起状态
let dialogVisible = ref(false); // 控制对话框的显示和隐藏
let formLabelWidth = '120px'; // 表单标签的宽度
let form = ref({ // 表单数据
  old_password: '', // 表单字段
  new_password: '', 
  confirm_password: '' 
});
let rules = reactive({
  old_password: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6-20之间', trigger: 'blur' },
  ],
  new_password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6-20之间', trigger: 'blur' },
  ],
  confirm_password: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6-20之间', trigger: 'blur' }, 
  ]
})

let asideWidth = computed(() => {
  if (isCollapse.value) {
    return '64px'; // 收起时的宽度
  }else{
    return '250px'; // 展开时的宽度 
  }
}) // 侧边栏的宽度

let formTag = ref();

const onCollapse = () => {
  isCollapse.value = !isCollapse.value; // 切换状态 
}

const onExit = () => {
  authstore.clearToken(); // 调用退出登录方法
  router.push('/login');  // 跳转到登录页面
}

const onSubmit = () => {
  formTag.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        const res = await apiClient.post('oaauth/change-password/', { 
          old_password: form.value.old_password, 
          new_password: form.value.new_password,
          confirm_password: form.value.confirm_password,
        });
        ElMessage.success(res.data.detail || '修改密码成功'); // 显示后端返回的成功消息
        dialogVisible.value = false; // 关闭对话框
      } catch (error) {
        // 正确处理后端返回的错误信息
        const errorMessage = error.response?.data?.detail || '修改密码失败';
        ElMessage.error(errorMessage); // 显示错误消息
      }
    } else {
      ElMessage.error('请填写正确的信息');
    }
  });
};


const onResetpwd = () => {
  form.value = { // 重置表单数据
    old_password: '', // 表单字段
    new_password: '',
    confirm_password: ''
  };
  dialogVisible.value = true; // 打开对话框
}

</script>
  
  <style scoped>
  /* 统一容器布局，设置整个页面的高度为100vh */
  .el-container {
    height: 100vh;
  }
  
  /* 侧边栏样式 */
  .aside {
    background: #2C3E50; /* 深色背景，提升视觉效果 */
    color: #ECF0F1; /* 浅色字体 */
    box-shadow: 2px 0 10px rgba(0, 21, 41, 0.15); /* 增加阴影深度 */
    border-right: 1px solid #BDC3C7; /* 增加边界分隔 */
    display: flex;
    flex-direction: column;
    padding-top: 0px;
    padding-left: 0px; /* 左侧内边距 */
    overflow-y: auto; /* 确保侧边栏内容滚动 */
  }
  
  /* 侧边栏标题样式 */
  .sidebar-title {
    font-size: 20px; /* 设置字体大小 */
    color: #ECF0F1; /* 设置字体颜色 */
    font-weight: bold; /* 字体加粗 */
    padding-left: 20px; /* 增加左侧内边距 */
    background-color: #1A2531; /* 设置标题背景色，更深的背景 */
    width: 100%; /* 确保标题与侧边栏宽度一致 */
    padding: 12px 20px; /* 增加上下内边距，让标题更有层次 */
    border-radius: 4px 4px 0 0; /* 圆角，保持一致性 */
    margin-bottom: 0; /* 去掉标题与菜单项之间的间隙 */
  }
  
  /* 菜单项样式 */
  .el-menu-item {
    padding: 12px 20px; /* 增加内边距 */
    color: #ECF0F1;
    text-decoration: none;
    border-radius: 4px; /* 圆角 */
    margin-bottom: 5px; /* 菜单项之间的间隔 */
    transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
    background-color: #2C3E50; /* 保持菜单项背景色一致 */
  }
  
  /* 鼠标悬停时的样式 */
  .el-menu-item:hover {
    background-color: #409EFF; /* 鼠标悬停时背景变为蓝色 */
    color: white; /* 鼠标悬停时字体颜色变为白色 */
  }
  
  /* 菜单禁用项 */
  .el-menu-item.is-disabled {
    color: #BDC3C7; /* 禁用时字体颜色变为灰色 */
    background-color: transparent; /* 禁用时背景透明 */
  }
  
  /* 主体容器样式 */
  .el-header {
    background: white;
    color: white;
    padding-left: 10px; /* 左侧内边距 */
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    z-index: 1;
  }
  .el-header .left-header {
    display: flex;
    align-items: center; 
  }
  .el-dropdown-link {
    display: flex;
    align-items: center;
  }
  
  /* 主体内容区域 */
  .el-main {
    padding: 20px;
    background: #f4f6f9; /* 修改为更明亮的背景色 */
    overflow-y: auto;
  }
  
  /* 优化容器的排列方式，确保响应式布局 */
  .el-container > .el-container {
    flex-direction: column;
    overflow: hidden; /* 防止内部元素溢出 */
  }
  
  /* 响应式调整：小屏幕上自动隐藏侧边栏并使主体内容占满 */
  @media (max-width: 768px) {
    .el-aside {
      width: 100px; /* 缩小侧边栏宽度 */
    }
  
    .el-main {
      padding: 10px; /* 减小主内容区域的内边距 */
    }
  }
  </style>
  